<template>
	<view class="store-team-info">
		<block v-if="show">
			<view class="store-team-info-header">
				<view class="store-team-info-header-left">
					<image :lazy-load="true" :src="designInfo.image" mode="aspectFill"></image>
					<view class="store-team-info-header-left-leve">{{designInfo.code}}</view>
				</view>
				<view class="store-team-info-header-right">
					<view class="store-team-info-heade-name">{{designInfo.name}}</view>
					<view class="store-team-info-heade-style">{{designInfo.style_name}}</view>
					<view class="store-team-info-heade-call" @click="makeCall">
						<image :lazy-load="true"
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/merchant/icon1_orange.png">
						</image>
						联系TA
					</view>
				</view>
			</view>
			<view class="store-team-info-resume">
				<view class="store-team-info-resume-tit">个人简介 <text>RESUME</text></view>
				<view class="store-team-info-resume-des">{{designInfo.brief}}</view>
			</view>
			<view class="store-team-info-cases">
				<pt-title name="TA的案例" :isRight="false" padding="0 30rpx" leftSize="40"></pt-title>
				<pt-case :list="teamCaseList" :showAttr="true" @goInfo="goCaseInfo"></pt-case>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && teamCaseList.length"></pt-nomore>
			<pt-nothing text="暂无案例" :isHigh="true" v-if="!teamCaseList.length" bgColor="#FFF"></pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				designInfo: '',
				stylist_id: '',
				teamCaseList: [],
				page: 0,
				isLoading: false,
				noMore: false
			};
		},
		onLoad(options) {
			this.stylist_id = options.stylist_id
			if (options.parent_id) {
				uni.setStorageSync('parent_id', options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl', curPage.$page.fullPath)
				this.$u.api.binding_refer({
					id: options.parent_id
				}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			this.init()
			this.getCaseList()
		},
		methods: {
			init() {
				this.$u.api.StylistList({
					store_stylist_id: this.stylist_id
				}).then(res => {
					this.show = true
					this.designInfo = res.datas[0]
					let user_id = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo'))
						.user_id : 0
					this.$u.mpShare = {
						title: this.designInfo.name,
						path: '/merchant/store-team/store-team-info?stylist_id=' + this.stylist_id +
							'&parent_id=' + user_id,
						imageUrl: this.designInfo.image
					}
				})
			},
			getCaseList() {
				this.$u.api.CaseList({
					page: this.page,
					store_stylist_id: this.stylist_id
				}).then(res => {
					this.isLoading = false
					if (res.datas.list.length) {
						res.datas.list.forEach(item => {
							this.teamCaseList.push(item)
						})
					} else {
						this.noMore = true
					}
				})
			},
			goCaseInfo(case_id) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/case-list/case-details/case-details?case_id=' + case_id
				})
			},
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('serviceInfo').service_phone
				})
			}
		},
		onReachBottom() {
			if (!this.noMore) {
				this.page++
				this.isLoading = true
				this.getCaseList()
			}
		}
	}
</script>

<style lang="scss">
	.store-team-info {
		.store-team-info-header {
			background-color: #F6F6F6;
			padding: 30rpx;
			display: flex;
			align-items: center;

			.store-team-info-header-left {
				width: 198rpx;
				height: 264rpx;
				position: relative;

				image {
					width: 198rpx;
					height: 264rpx;
					border-radius: 8rpx 8rpx 8px 0px;
				}

				.store-team-info-header-left-leve {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					border-radius: 8rpx 0px 8rpx 0px;
					background-color: #141414;
					color: #FFF;
					font-size: 24rpx;
					height: 48rpx;
					line-height: 48rpx;
				}
			}

			.store-team-info-header-right {
				flex: 1;
				min-width: 0;
				margin-left: 30rpx;

				.store-team-info-heade-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
				}

				.store-team-info-heade-style {
					color: #454545;
					font-size: 24rpx;
					margin: 40rpx 0;
				}

				.store-team-info-heade-call {
					width: 190rpx;
					height: 62rpx;
					border: 2rpx solid #F59359;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					color: #F59359;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 15rpx;
					}
				}
			}
		}

		.store-team-info-resume {
			background-color: #F6F6F6;
			padding: 20rpx 30rpx 30rpx;

			.store-team-info-resume-tit {
				font-weight: bold;
				color: #141414;
				font-size: 32rpx;

				text {
					font-size: 24rpx;
					margin-left: 20rpx;
					font-weight: 100;
				}
			}

			.store-team-info-resume-des {
				line-height: 42rpx;
				font-size: 24rpx;
				color: #454545;
				margin-top: 40rpx;
			}
		}

		.store-team-info-cases {
			padding: 50rpx 0;
		}
	}
</style>